import logo from './logo.svg';
import React, { useState, PureComponent } from 'react';
import './App.css';
import Main from './pages/main';
import Profile from './pages/profile';
import Category from './pages/category';
import './style.css'
import store from './store';
// import About from './pages/about';
import {Navigate, NavLink, Route,Routes} from 'react-router-dom'
import Found from './view/found'
import Home from './view/home'
import About from './view/about'
import Login from './view/login'
import HomeRecommend from './view/homeRecommend';
import Ranking from './view/ranking'
// function App() {
//   return (
//     <div>
//       <h2>Counter</h2>
//     </div>
//   );
// }

// export default App;

export default class App extends PureComponent {
  constructor(props) {
    super();
    this.state = {
      counter: store.getState().counter.counter
    };
  }
  componentDidMount() {
    console.log('componentDidMount', Date.now());
    store.subscribe(() => {
      const state = store.getState();
      console.log("🚀 ~ App ~ store.subscribe ~ state123:", state)
      this.setState({
        counter: state.counter
      })
    });
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h2>Counter</h2>
        <div className="main">
          {/* <Category />
          <Main />
          <Profile />
          <About /> */}
          <div className="nav">
            <NavLink to="/home" style={({isActive})=>({background:isActive?'red':''})}>Home</NavLink>
            <NavLink to="/about">About</NavLink>
          </div>
          <Routes>
            <Route path="/" element={<Navigate to={"/home"} />} />
            <Route path="/home" element={<Home />}>
              <Route path="/home/recommend" element={<HomeRecommend />} />
              <Route path="/home/ranking" element={<Ranking />} />
            </Route>
            <Route path="/about" element={<About />} />
            <Route path="*" element={<Found />} />
          </Routes>
        </div>
      </div>
    );
  }
}